<template>
  <el-card>
  <div style="background-color: white;height: 100%; width: 100%;">
<!--    <div style="float: left; padding-left: 10px">-->
<!--      <span>品号：</span>-->
<!--      <el-select v-model="valurArr" multiple placeholder="请选择品号">-->
<!--        <el-option-->
<!--            v-for="item in options"-->
<!--            :key="item.value"-->
<!--            :label="item.label"-->
<!--            :value="item.value">-->
<!--        </el-option>-->
<!--      </el-select>-->
<!--      <el-button @click="getRecord" type="primary" style="margin-left: 30px">查询</el-button>-->
<!--      <el-button @click="submit" type="primary" style="margin-left: 30px" v-loading.fullscreen.lock="fullscreenLoading">-->
<!--        提交-->
<!--      </el-button>-->


<!--      &lt;!&ndash;      <el-button @click="print" type="primary" style="margin-left: 30px" v-loading.fullscreen.lock="fullscreenLoading">打印</el-button>&ndash;&gt;-->
<!--    </div>-->
<!--    <el-form style="width: 100%" :inline="true" label-position="right" :model="formInline" label-width="80px">-->
      <el-table
          :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          border
          height="760"
      >
        <el-table-column
            label="品号"
            prop="productNo"
            align="center"
            width="180"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            label="品名"
            prop="productName"
            align="center"
            width="180"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="specification"
            label="规格"
            align="center"
            width="180"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="texture"
            label="材质"
            align="center"
            width="180"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="thickness"
            label="直径/厚度"
            align="center"
            width="180"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="width"
            label="宽度"
            align="center"
            width="180"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="extent"
            label="长度"
            align="center"
            width="180"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="steelNo"
            label="牌号钢号"
            align="center"
            width="180"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="hardness"
            label="抗拉/硬度"
            align="center"
            width="180"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="placeOfOrigin"
            label="产地"
            align="center"
            width="180"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="brand"
            label="牌子"
            align="center"
            width="180"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="executiveStandard"
            label="执行标准"
            align="center"
            width="180"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="packingRequirement"
            label="包装要求"
            align="center"
            width="180"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="remark"
            label="备注"
            align="center"
            width="180"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作"
        fixed="right"
        align="center">
          <template slot-scope="scope" v-if="scope.row.productNo.length === 12">
            <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        :page-size="pageSize"
        :current-page="currentPage"
        :page-sizes="[10,20,30,50]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="float: right"
    >
    </el-pagination>
<!--    </el-form>-->
    <buying-order-model v-if="showModel" :data="modelData" :dialog-visible="showModel" @cancelBtn="cancelModel"></buying-order-model>
  </div>
  </el-card>
</template>

<script>
import server from "@/util/request";
import BuyingOrderModel from "@/views/model/BuyingOrderModel";

export default {
  name: "NewBuyingOrder",
  components: {
    BuyingOrderModel
  },
  data() {
    return {
      tableData: [],
      valurArr: [],
      options: undefined,
      url: {
        queryMB001Url: '/buying-order/query/mb001-list',
        queryRecordUrl: '/buying-order/query/record-new',
        addUrl: '/buying-order/add',
      },
      formInline: [],
      fullscreenLoading: false,
      dialogVisible: false,
      showModel: false,
      modelData: null,
      currentPage: 1,
      pageSize: 10,
    }
  },
  created() {
    // this.getListMB001()
    this.getRecord()
  },
  methods: {
    handleSizeChange(e){
      this.currentPage = 1
      this.pageSize = e
    },
    handleCurrentChange(e){
      this.currentPage = e
    },
    getListMB001() {
      // server({
      //   url: this.url.queryMB001Url,
      //   method: 'get',
      // }).then(res => {
      //   this.options = res.data
      //   this.options.forEach((item, index) => {
      //     this.options[index] = {
      //       value: item,
      //       text: item
      //     }
      //   })
      // })
    },
    getRecord() {
      // if (this.valurArr.length === 0) {
      //   return
      // }
      server({
        url: this.url.queryRecordUrl,
        method: "post",
        data: this.valurArr
      }).then(res => {
        this.tableData = res.data
      });
    },
    insertRecode() {
      this.fullscreenLoading = true;
      server({
        url: this.url.addUrl,
        method: 'post',
        data: this.formInline
      }).then(res => {
        if (res.data.success) {
          this.$notify({
            title: '成功',
            type: 'success'
          });
        }
      }).catch(err => {
        this.$notify.error({
          title: err,
        });
        this.fullscreenLoading = false
      }).finally(() => {
        this.fullscreenLoading = false
      })
    },
    submit() {
      this.$confirm('此操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.insertRecode()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });

    },
    handleEdit(index,row){
      this.modelData = [row]
      this.showModel = true;
    },
    cancelModel(msg) {
      this.showModel = false
    },
  },

}
</script>

<style scoped>
/*/deep/ .el-table__body-wrapper {*/
/*  background-color: #F7F6FF;*/
/*}*/

/*/deep/ .el-table__body-wrapper::-webkit-scrollbar {*/
/*  width: 10px !important;*/
/*  height: 10px !important;*/
/*}*/
</style>
